<template>
  <div
    class="search-bar"
    :class="[
      needBack ? 'needBack' : '',
      searchBarSize === 'small' ? 'small' : searchBarSize === 'default' ? 'default' : '',
    ]"
  >
    <el-form
      label-width="120px"
      label-position="left"
      :model="form"
      :inline="true"
      @submit.native.prevent
    >
      <template v-for="(item, index) in searchList" :key="index + 'search'">
        <el-form-item
          v-if="item.type === 'textarea'"
          :label="item.label"
          :label-width="item.labelWidth"
        >
          <el-input
            v-model="form[item.prop]"
            :type="item.type"
            :size="size"
            class="w100"
            :autosize="{ maxRows: 3 }"
            clearable
          />
        </el-form-item>
        <el-form-item
          v-else-if="item.type === 'text'"
          :label="item.label"
          :label-width="item.labelWidth"
        >
          <el-input
            v-model="form[item.prop]"
            :type="item.type"
            :size="size"
            class="w100"
            @keyup.enter="submitSeach"
            clearable
          >
            <template #suffix>
              <div @click="submitSeach" class="suffix">
                <SvgIcon name="search" class="icon-24" />
              </div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          v-else-if="item.type === 'numberText'"
          :label="item.label"
          :label-width="item.labelWidth"
        >
          <el-input
            v-model="form[item.prop]"
            :type="item.type"
            :size="size"
            class="w100"
            @keyup.enter="submitSeach"
            @input="filterNumberInput(form, item.prop)"
            clearable
          >
            <template #suffix>
              <div @click="submitSeach" class="suffix">
                <SvgIcon name="search" class="icon-24" />
              </div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          v-else-if="item.type === 'dropdown'"
          :label="item.label"
          :label-width="item.labelWidth"
        >
          <el-select
            v-model="form[item.prop]"
            :size="size"
            class="w100"
            clearable
            filterable
            :popper-class="
              searchBarSize === 'small'
                ? 'popper-select-small'
                : searchBarSize === 'default'
                ? 'popper-select-default'
                : ''
            "
            @change="dropdownChange(item, $event)"
          >
            <el-option
              v-for="i in item.list"
              :key="i + 'select'"
              :label="i.label"
              :value="i.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-else-if="item.type == 'multi_select'"
          :label="item.label"
          :label-width="item.labelWidth"
        >
          <el-select
            v-model="form[item.prop]"
            :size="size"
            multiple
            :collapse-tags="true"
            :max-collapse-tags="2"
            class="w100"
            filterable
            clearable
            :popper-class="
              searchBarSize === 'small'
                ? 'popper-select-small'
                : searchBarSize === 'default'
                ? 'popper-select-default'
                : ''
            "
          >
            <el-option
              v-for="i in item.list"
              :key="i + 'multi_select'"
              :label="i"
              :value="i"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-else-if="item.type == 'datetime'"
          :label="item.label"
          :label-width="item.labelWidth"
        >
          <el-date-picker
            v-model="form[item.prop]"
            :type="item.type"
            :size="size"
            style="width: 100% !important; height: 100% !important"
            :format="item.format ? item.format : 'YYYY-MM-DD HH:mm:ss'"
            :value-format="item.valueFormat ? item.valueFormat : 'YYYY-MM-DD HH:mm:ss'"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-else-if="item.type == 'date'"
          :label="item.label"
          :label-width="item.labelWidth"
        >
          <el-date-picker
            v-model="form[item.prop]"
            :type="item.type"
            :size="size"
            style="width: 100% !important; height: 100% !important"
            :format="item.format ? item.format : 'YYYY-MM-DD'"
            :value-format="item.valueFormat ? item.valueFormat : 'YYYY-MM-DD'"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-else-if="item.type == 'month'"
          :label="item.label"
          :label-width="item.labelWidth"
        >
          <el-date-picker
            v-model="form[item.prop]"
            :type="item.type"
            :size="size"
            style="width: 100% !important; height: 100% !important"
            format="YYYY-MM"
            value-format="YYYY-MM"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-else-if="item.type == 'monthrange'"
          label=""
          :label-width="item.labelWidth"
        >
          <el-date-picker
            v-model="form[item.prop]"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="item.shortcuts || []"
            format="YYYY-MM"
            value-format="YYYY-MM"
            clearable
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          v-else-if="item.type == 'daterange'"
          :label="item.label"
          :label-width="item.labelWidth"
        >
          <el-date-picker
            v-model="form[item.prop]"
            type="daterange"
            unlink-panels
            :size="size"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="item.shortcuts || []"
            :format="item.format ? item.format : 'YYYY-MM-DD'"
            :value-format="item.valueFormat ? item.valueFormat : 'YYYY-MM-DD'"
          />
        </el-form-item>
        <el-form-item
          v-else-if="item.type == 'datetimerange'"
          :label="item.label"
          :label-width="item.labelWidth"
        >
          <el-date-picker
            v-model="form[item.prop]"
            type="datetimerange"
            unlink-panels
            :size="size"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="item.shortcuts || []"
            :format="item.format ? item.format : 'YYYY-MM-DD HH:mm:ss'"
            :value-format="item.valueFormat ? item.valueFormat : 'YYYY-MM-DD HH:mm:ss'"
          />
        </el-form-item>
        <el-form-item
          v-else-if="item.type === 'cascade'"
          :label="item.label"
          :label-width="item.labelWidth"
        >
          <el-cascader
            :options="item.options"
            v-model="form[item.prop]"
            :size="size"
            :props="{ checkStrictly: true }"
            clearable
            :filterable="true"
            class="w100"
          />
        </el-form-item>
      </template>
      <el-form-item class="btn-form-item">
        <div class="form-btn flex-start" :style="{ 'min-width': operateWidth }">
          <el-button :class="submitClass" :disabled="disabled" @click="submitSeach">
            查询
          </el-button>
          <template v-if="!clearRefresh">
            <el-button class="btn-white" @click="clearSearch">重置</el-button>
          </template>
          <template v-else>
            <el-button @click="clearSearch" class="refresh-icon">
              <SvgIcon name="refresh" />
            </el-button>
          </template>
          <slot name="other"></slot>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { defineComponent, reactive, watch, computed } from "vue";
export default defineComponent({
  name: "SeachBar",
  components: {},
  props: {
    searchBarSize: {
      type: String,
      default: "default",
    },
    // 是否需要背景
    needBack: {
      type: Boolean,
      default: false,
    },
    searchList: {
      type: Array,
      default: () => [],
    },
    labelPosition: {
      type: String,
      default: "left",
    },
    size: {
      type: String,
      default: "default",
    },
    auto: {
      type: Boolean,
      default: true,
    },
    //按钮过少时宽度手动设置保证长度与form-item一致flex换行
    operateWidth: {
      type: String,
      default: "100%",
    },
    clearRefresh: {
      type: Boolean,
      default: false,
    },
    submitClass: {
      type: String,
      default: "btn-yellow",
    },
  },
  emits: ["search", "selectChange"],
  setup(props, context) {
    const form = reactive({});
    let disabled = computed(() => {
      let flag = props.searchList.some((item) => {
        return (
          item.hasOwnProperty("required") &&
          item.required === true &&
          form[item.prop] !== 0 &&
          !form[item.prop]
        );
      });
      return flag;
    });
    // 针对某些下拉框之间需要进行联动设置
    const dropdownChange = (item, e) => {
      if (item.change) {
        let keys = Object.keys(form);
        keys.forEach((v) => {
          if (item.linkProp.includes(v)) {
            form[v] = "";
          }
        });
        context.emit("selectChange", item.prop, e);
      } else {
      }
    };
    const submitSeach = (values) => {
      let keys = Object.keys(form);
      // 将参数为null和undefined转为空字符串
      keys.forEach((v) => {
        if (form[v] !== 0 && form[v] !== false && !form[v]) {
          form[v] = "";
        }
      });
      context.emit("search", form, 1);
    };
    const clearSearch = (values) => {
      for (const item of props.searchList) {
        if (item.hasOwnProperty("defaultValue")) {
          form[item.prop] = item.defaultValue;
        } else {
          form[item.prop] = "";
        }
      }
      context.emit("search", form, 2);
    };
    // 过滤非数字类型输入
    const filterNumberInput = (form, prop) => {
      const regex = /[^0-9]/g;
      form[prop] = form[prop].replace(regex, "");
    };
    watch(
      () => props.searchList,
      (newValue) => {
        for (const item of newValue) {
          if (item.hasOwnProperty("defaultValue")) {
            form[item.prop] = item.defaultValue;
          } else {
            form[item.prop] = "";
          }
        }
        props.auto && context.emit("search", form, 1);
      },
      { immediate: true }
    );

    return {
      form,
      disabled,
      submitSeach,
      clearSearch,
      filterNumberInput,
      dropdownChange,
    };
  },
});
</script>
<style scoped lang="scss">
.needBack {
  border-radius: 20px;
  background-image: url("../../assets/img//search-stroke.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #eee9de;
}
.search-bar {
  padding: 18px 18px 0 18px;
  background-color: #ffffff;
}

.popper-select-small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px !important;
}

.popper-select-default {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 271px !important;
}
.small {
  :deep(.el-input__wrapper) {
    width: 160px !important;
  }
  :deep(.el-select__wrapper) {
    width: 160px !important;
  }
}

.default {
  :deep(.el-input__wrapper) {
    width: 271px !important;
  }
  :deep(.el-select__wrapper) {
    width: 271px !important;
  }
}

.suffix {
  cursor: pointer;
}

.form-btn {
  flex-wrap: wrap;
  gap: 10px;
}
.refresh-icon {
  background-color: transparent;
}
.refresh-icon:hover {
  background-color: transparent;
}
.btn-form-item {
  margin-right: 0 !important;
}
</style>
